<example name="Table Legacy Ng">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="tableExample as ctrl">
      <rg-legacy-table-toolbar stick>
        <div>Some toolbar content. Selected item:
          {{ctrl.selection.getActiveItem().name}}
        </div>
      </rg-legacy-table-toolbar>

      <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
        <rg-legacy-table-header>
          <rg-legacy-table-title>Avatar</rg-legacy-table-title>
          <rg-legacy-table-title>Check</rg-legacy-table-title>
          <rg-legacy-table-title active>Name</rg-legacy-table-title>
          <rg-legacy-table-title>Groups</rg-legacy-table-title>
        </rg-legacy-table-header>

        <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
          <rg-legacy-table-column avatar>
            <img ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
              class="ring-table__avatar__img"/>
          </rg-legacy-table-column>
          <rg-legacy-table-checkbox-cell></rg-legacy-table-checkbox-cell>
          <rg-legacy-table-column limited>{{ ::item.name }}</rg-legacy-table-column>
          <rg-legacy-table-column wide limited>
            <span class="ring-table__column-list"
              ng-repeat="subItem in ::item.subList">{{ ::subItem.name }}</span>
          </rg-legacy-table-column>
        </rg-legacy-table-row>
      </rg-legacy-table>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import TableLegacyNG from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng';

    angular.module('test', [TableLegacyNG]).
      controller('tableExample', function ($scope) {
        var ctrl = this;

        ctrl.itemsArray = [{
          name: 'test1',
          subList: [{name: 'some group'}],
          iconUrl: 'https://d13yacurqjgara.cloudfront.net/users/317408/avatars/mini/Layout_Behance_Avatar_(1).jpg?1376382552'
        }];

        for (var i = 0; i < 20; i++) {
          ctrl.itemsArray.push({
            name: Math.random(),
            subList: [
              {name: Math.random()},
              {name: Math.random()},
              {name: Math.random()}
            ]
          });
        }

      });
  </file>
  <file type="css">
    body {
      margin: 0;
    }
  </file>
</example>

<example name="Table Legacy Ng without selection">
  <file type="html" disable-auto-size>
    <div ng-app="Ring.table-legacy" ng-strict-di
      ng-init="itemsArray = ['first', 'second', 'third', 'fourth']">
      <rg-legacy-table items="itemsArray" disable-selection="true">
        <rg-legacy-table-row row-item="item" ng-repeat="item in itemsArray">
          <rg-legacy-table-column>{{item}}</rg-legacy-table-column>
        </rg-legacy-table-row>
      </rg-legacy-table>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng';
  </file>
  <file type="css">
    body {
      margin: 0;
    }
  </file>
</example>

<example name="Table Legacy Ng with sidebar">
  <file type="html" disable-auto-size>
    <h3>Scroll down to see the effect</h3>
    <div ng-app="test" ng-strict-di ng-controller="tableExample as ctrl">
      <rg-sidebar show="ctrl.isShowSideBar"
        place-under-sibling=".some-toolbar"
        top-offset="1">
        <div class="ring-sidebar__title">Here is sidebar content</div>
        <div class="ring-sidebar__section">
          {{ctrl.selection.getActiveItem().name}}
        </div>
        <rg-select
          options="item.name for item in ctrl.itemsArray track by item.name"></rg-select>

        <rg-query-assist
          x-data-source="ctrl.queryAssistSource"
          query="ctrl.query"></rg-query-assist>
      </rg-sidebar>

      <rg-legacy-table-toolbar stick class="some-toolbar">
        <div>Some toolbar content. Selected
          item: {{ctrl.selection.getActiveItem().name}}
          <rg-sidebar-toggle-button model="ctrl.isShowSideBar">Toggle
            toolbar
          </rg-sidebar-toggle-button>
        </div>
      </rg-legacy-table-toolbar>

      <rg-legacy-table items="ctrl.itemsArray" selection="ctrl.selection">
        <rg-legacy-table-header class="example__table-header"
          stick-to=".some-toolbar">
          <rg-legacy-table-title>Avatar</rg-legacy-table-title>
          <rg-legacy-table-title>Check</rg-legacy-table-title>
          <rg-legacy-table-title active>Name</rg-legacy-table-title>
          <rg-legacy-table-title></rg-legacy-table-title>
        </rg-legacy-table-header>

        <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
          <rg-legacy-table-column avatar>
            <img ng-if="::item.iconUrl" ng-src="{{ ::item.iconUrl }}"
              class="ring-table__avatar__img"/>
          </rg-legacy-table-column>
          <rg-legacy-table-checkbox-cell></rg-legacy-table-checkbox-cell>
          <rg-legacy-table-column limited>{{::item.name }}</rg-legacy-table-column>
          <rg-legacy-table-column>
            <rg-sidebar-toggle-button ng-show="item.active"
              model="ctrl.isShowSideBar"></rg-sidebar-toggle-button>
          </rg-legacy-table-column>
        </rg-legacy-table-row>
      </rg-legacy-table>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import TableNG from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
    import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';

    angular.module('test', [TableNG, SidebarNG, SelectNG, QueryAssistNG]).
      controller('tableExample', function ($timeout, $scope) {
        var ctrl = this;

        ctrl.query = 'fooo'

        ctrl.isShowSideBar = true;

        $timeout(function () {
          ctrl.itemsArray = [{
            name: 'test1',
            iconUrl: 'https://d13yacurqjgara.cloudfront.net/users/317408/avatars/mini/Layout_Behance_Avatar_(1).jpg?1376382552'
          }];
          for (var i = 0; i < 20; i++) {
            ctrl.itemsArray.push({name: Math.random()});
          }
        }, 500);

        ctrl.queryAssistSource = function ({query, caret, omitSuggestions}) {
          return {
            caret: caret,
            query: query,
            styleRanges: omitSuggestions ? [{
              start: 0,
              length: 1,
              style: 'text'
            }] : [],
            suggestions: [{
              prefix: 'login: ',
              option: 'test',
              suffix: ' ',
              description: 'logins',
              matchingStart: 0,
              matchingEnd: 4,
              caret: 2,
              completionStart: 0,
              completionEnd: 4,
              group: 'logins',
              icon: 'data:uri'
            }]
          };
        };


      });
  </file>
  <file type="css">
    body {
      margin: 0;
    }
  </file>
</example>
